<section>
  <div class="btn-group" dDropDown (toggleEvent)="onToggle($event)">
    <d-icon dDropDownToggle [icon]="'icon-select-arrow'" [operable]="true" [rotate]="rotateDegrees">
      <span iconPrefix>more</span>
    </d-icon>
    <ul dDropDownMenu class="devui-dropdown-menu" role="menu">
      <li role="menuitem">
        <input type="text" class="devui-input devui-input-sm devui-search-in-dropdown" placeholder="input box" />
        <div class="icon-in-search">
          <i class="icon icon-search"></i>
        </div>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Disabled Option</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>New</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Delete</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 1</a>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Item 2</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 3</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 4</a>
      </li>
    </ul>
  </div>
</section>
<section>
  <h5>Attached to Body to avoid being blocked by container with scrollbar</h5>
  <div class="btn-group" dDropDown appendToBody (toggleEvent)="onToggle($event)">
    <d-icon dDropDownToggle class="devui-dropdown-default devui-dropdown-origin" [icon]="'icon-select-arrow'" [rotate]="rotateDegrees">
      <span iconPrefix>more</span>
    </d-icon>
    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
      <li role="menuitem">
        <input type="text" class="devui-input devui-input-sm devui-search-in-dropdown" placeholder="input box" />
        <div class="icon-in-search">
          <i class="icon icon-search"></i>
        </div>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Disabled Option</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>New</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Delete</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 1</a>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Item 2</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 3</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 4</a>
      </li>
    </ul>
  </div>
</section>
